<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加通讯接口</title>
    <!-- 引入element样式 -->
<!--    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.1/theme-chalk/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">
<!--    <link rel="stylesheet" type="text/css" href="../../static/css/index.css">-->
    <link rel="stylesheet" type="text/css" href="../../static/css/communicationChoice.css">
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .el-input-number{
        width: 40%;
    }
</style>
<body>
    <div id="app" v-cloak>
        <el-steps :active="radioIsActive">
            <el-step title="步骤 1" description="通讯接口选择"></el-step>
            <el-step title="步骤 2" description="通讯接口设置"></el-step>
            <el-step title="步骤 3" description="添加通讯仪表"></el-step>
            <el-step title="步骤 4" description="添加完成"></el-step>
        </el-steps>
        <div class="radioDiv" v-if="radioIsActive == 1">
            <el-divider content-position="left" >通讯接口: &nbsp;</el-divider>
            <el-radio-group v-model="radio" @change="getRadioVal()">
                <el-radio  label="1" border>TCP通讯接口</el-radio>
                <el-radio  label="2" border>GPRS通讯接口</el-radio>
                <el-radio  label="3" border>MODBUS通讯接口</el-radio>
            </el-radio-group>
            <div class="stepDiv">
                <el-button type="success" @click="nextStep" plain>下一步</el-button>
            </div>
        </div>
        <div class="radioDiv" v-if="radioIsActive == 2">
            <el-form :label-position="labelPosition" label-width="100px">
                <el-form-item label="" >
                    <el-divider content-position="left" >串口: &nbsp;</el-divider>
                    <el-select v-model="serialPort" placeholder="请选择" >
                        <el-option
                                v-for="item in serialPorts"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="">-->
<!--                    <el-divider content-position="left" >波特率: &nbsp;</el-divider>-->
<!--                    <el-select v-model="baudRate" placeholder="请选择" >-->
<!--                        <el-option-->
<!--                                v-for="item in baudRates"-->
<!--                                :key="item"-->
<!--                                :label="item"-->
<!--                                :value="item">-->
<!--                        </el-option>-->
<!--                    </el-select>-->
<!--                </el-form-item>-->
            </el-form>
            <div class="stepDiv">
                <el-button type="success" @click="previousStep" plain>上一步</el-button>
                <el-button type="success" @click="nextStep" plain>下一步</el-button>
            </div>
        </div>
        <div class="radioDiv" v-if="radioIsActive == 3">
            <el-form :label-position="labelPosition" label-width="80px">
                <el-form-item label="串口: ">
                    <el-select v-model="serialPort" placeholder="请选择" >
                        <el-option
                                v-for="item in serialPorts"
                                :key="item"
                                :label="item"
                                :value="item">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="仪表编号: " >
                    <el-input v-model="meterAddress" ></el-input>
                </el-form-item>
                <el-form-item label="名称设置: " >
                    <el-input v-model="name" ></el-input>
                </el-form-item>
                <el-form-item label="寄存地址: " >
                    <el-input v-model="registerAddress" ></el-input>
                </el-form-item>
<!--                <el-form-item label="间隔时间: " >-->
<!--                    <el-input v-model="intervalTime" placeholder="请输入仪表间隔时间(s)" @change="getSerialPortMeter"></el-input>-->
<!--&lt;!&ndash;                    <span style="margin-left: 20px;color: red">*  两仪表间隔需要 {{time}} s</span>&ndash;&gt;-->
<!--                </el-form-item>-->
                <el-form-item label="间隔时间: " >
                    <el-input-number v-model="intervalTime" :step="3" :min="0" step-strictly @change = "wahIntervalTime"></el-input-number>
                    <!--                <el-input v-model="intervalTime" placeholder="请输入仪表两间隔时间(s)" @change="getSerialPortMeter"></el-input>-->
                    <!--                <span style="margin-left: 20px;color: red">*  轮询所有仪表需要 {{time}} s</span>-->
                </el-form-item>

                <el-form-item label="清零模式: " >
                    <el-radio-group v-model="clearRadio" size="small">
                        <el-radio label="1" border>开启双清零模式</el-radio>
                        <el-radio label="2" border >关闭双清零模式</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="模式: " >
                    <el-radio-group v-model="whetherBCD" size="small">
                        <el-radio label="1" border>BCD码模式</el-radio>
                        <el-radio label="2" border >整型模式</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <div class="stepDiv">
                <el-button type="success" @click="previousStep" plain>上一步</el-button>
                <el-button type="success" @click="nextStep" plain>下一步</el-button>
            </div>
        </div>
        <div style="height: 450px; width: 60%;padding-top: 50px;padding-bottom: 50px;padding-left: 490px" v-if="radioIsActive == 4">
            <img src="../../static/image/checkMark.png">
            <div class="stepDiv">
                <el-row>
                    <el-button type="success" @click="complete">设置完成</el-button>
                    <el-button type="primary" @click="continuSetup">继续添加</el-button>
                </el-row>
            </div>
        </div>
    </div>
</body>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>-->
<!--&lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>-->
<script src="../../static/js/vue.js"></script>
<script src="../../static/js/index.js"></script>
<script src="../../static/js/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            value1:'',
            name:'',
            radio:'1',
            radioIsActive:1,
            serialPort:'COM3',
            registerAddress:'',
            baudRate:'9600',
            meterAddress:1,
            whetherBCD:'1',
            clearRadio:'2',
            serialPorts: [],
            time:0,
            intervalTime:0,
            baudRates:['110','300','600','1200','2400','4800','9600','14400','19200','38400','56000','57600','115200','128000']
        },
        created:function(){
            this.allComs();
        },
        methods: {
            getSerialPortMeter:function() {
                var self = this;
                axios.post('http://localhost:8032/device/getSerialPortMeter',{"port":self.serialPort}).then(function (res) {
                    if (res.data.code == true) {
                        console.log("获取成功");
                        console.log(Number(res.data.data))
                        console.log(Number(self.intervalTime))
                        if (Number(res.data.data) == 0) {
                            self.time = Number(self.intervalTime) * 3;
                        } else {
                            // self.time = Number(res.data.data) * (Number(self.intervalTime))
                            self.time = 3 * (Number(self.intervalTime))
                        }
                    } else {
                        console.log("获取失败");
                        self.$notify.error({
                            title: '温馨提示',
                            message: '仪表个数获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            allComs: function() {
                var self = this;
                // 获取到所有的串口信息
                axios.post('http://localhost:8032/device/allComs').then(function (res) {
                    if (res.data.code == true) {
                        console.log("串口获取成功");
                        self.serialPorts = res.data.data
                    } else {
                        console.log("串口获取失败");
                        self.$notify.error({
                            title: '温馨提示',
                            message: '串口获取失败'
                        });
                        return ;
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            /*获取单选框的值*/
            getRadioVal:function(){
                console.log(this.radio);
            },
            nextStep:function () {
                var self = this;
                if (self.radioIsActive == 2) {
                    self.radioIsActive = 3
                } else if(self.radioIsActive == 3){

                    // 数据校验
                    if (Number(self.meterAddress) > 32 || Number(self.meterAddress) < 1) {
                        self.$message({
                            type: 'warning',
                            message: '设备编号超出范围，范围为1-32',
                            duration: 10000,
                            showClose: true,
                        })
                        return ;
                    }
                    if (self.name == undefined || self.name == null || self.name == '') {
                        self.$message({
                            type: 'warning',
                            message: '请输入名称设置',
                            duration: 10000,
                            showClose: true,
                        })
                        return ;
                    }
                    if (self.registerAddress == undefined || self.registerAddress == null || self.registerAddress == '') {
                        self.$message({
                            type: 'warning',
                            message: '请输入寄存器读取地址',
                            duration: 10000,
                            showClose: true,
                        })
                        return ;
                    }

                    console.log(self.intervalTime);
                    // 去添加数据库
                    // 去添加数据
                    self.$confirm("确定串口已连接完好? 否则会导致数据读取失败...","温馨提示",{
                        confirmButtonText:'确定',
                        cancelButtonText:'取消',
                        type:'warning'
                    }).then(function () {
                        axios.post('http://localhost:8032/device/addDevices',
                            {
                                "type":self.radio,
                                "port":self.serialPort,
                                "ip": self.meterAddress,
                                "baudRate":self.baudRate,
                                "name": self.name,
                                "clearMode": self.clearRadio,
                                "whetherBCD":self.whetherBCD,
                                registerAddress: self.registerAddress,
                                time: self.intervalTime
                            }
                        ).then(function (res) {
                            if (res.data.code == true) {
                                console.log("成功");
                                self.radioIsActive = 4
                            } else {
                                console.log("失败");
                                self.$notify.error({
                                    title: '温馨提示',
                                    message: '设置失败'
                                });
                                return ;
                            }
                        }).catch(function (error) {
                            console.log(error);
                        })
                    }).catch(function () {
                        self.$message({
                            type: 'info',
                            message: '已取消'
                        });
                    })
                } else {
                    var self = this;
                    self.radioIsActive = 2;
                }
            },
            previousStep:function () {
                if (this.radioIsActive == 2) {
                    this.radioIsActive = 1;
                } else {
                    this.radioIsActive = 2;
                }
            },
            complete:function () {
                window.parent.location.href="index.html"
            },
            continuSetup:function () {
                window.location.href = "communicationChoice.html";
            }
        }
    })
</script>
</html>